<template>
  <div>
    <mt-swipe :auto="4000">
	  <mt-swipe-item v-for="item in lunbotuList" :key="item.id">
	  	  <img :src="item.img">
	  </mt-swipe-item>
	</mt-swipe>

    <!-- 九宫格 到 6宫格 的改造工程 -->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <img src="../../images/menu1.png">
                <div class="mui-media-body">新闻资讯</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <img src="../../images/menu2.png">
                <div class="mui-media-body">图片分享</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <img src="../../images/menu3.png">
                <div class="mui-media-body">商品购买</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <img src="../../images/menu4.png">
                <div class="mui-media-body">留言反馈</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <img src="../../images/menu5.png">
                <div class="mui-media-body">视频专区</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <img src="../../images/menu6.png">
                <div class="mui-media-body">联系我们</div></a></li>
    </ul> 
	
  </div>
</template>

<script>
	import { Toast } from "mint-ui";
	export default {
		data() {
			return {
				lunbotuList: [] // 保存轮播图的数组
			};
		},
		created(){
		   //如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
		   this.getlunbotu();	
		},
		methods: {
           getlunbotu(){
               this.$http.get("http://www.liulongbin.top:3005/api/getlunbo").then(res => {
                   //console.log(res.body);
                   if(res.body.status === 0){
                   	  // 成功了
                   	  this.lunbotuList = res.body.message;
                   }else {
                   	 Toast("加载轮播图失败。。。");
                   }
               });
           }
		}
	};
</script>

<style lang="scss" scoped>
  .mint-swipe {
  	height: 200px;
  	.mint-swipe-item {
  		img {
	  	   width: 100%;
	  	   height: 100%;
  	  }
  	}
  	
  }
  .mui-grid-view.mui-grid-9{
  	background-color: #fff;
  	border: none;
  	.mui-table-view-cell{
  		border: 0;
  		img {
  			width: 60px;
  			height: 60px;
  		}
  		.mui-media-body{
		    font-size: 13px;
		 }
  	}
  }

</style>